<template>
    <div class="main">
        <div class="desc">欢迎登录！</div>
        <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
            <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误" />
            <a-form-item>
                <a-input size="large" type="text" placeholder="请输入帐户名" v-decorator="['username',{rules: [{ required: true, message: '请输入帐户名' }], validateTrigger: 'change'}]">
                    <a-icon slot="prefix" type="user" :style="{ color: '#333' }" />
                </a-input>
            </a-form-item>
            <div style="padding-top: 4px;"></div>
            <a-form-item>
                <a-input size="large" type="password" autocomplete="false" placeholder="请输入密码" v-decorator="['password',{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}]">
                    <a-icon slot="prefix" type="lock" :style="{ color: '#333','font-size':'14px' }" />
                </a-input>
            </a-form-item>
            <!-- <a-form-item>
                <div class="flex align-center justify-between">
                  <a-input size="large" style="width: 50%;" autocomplete="false" placeholder="请输入验证码" v-decorator="['captcha',{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
                      <a-icon slot="prefix" type="safety-certificate" :style="{ color: '#333' }"/>
                  </a-input>
                  <div v-if="codeInfo.picPath" class="codeBox flex align justify-around" @click="GetCode">
                    <img :src="codeInfo.picPath" alt="">
                  </div>
                  <div v-else class="codeBox flex align justify-around" @click="GetCode">
                    刷新验证码
                  </div>
                </div>
            </a-form-item> -->
            <div style="padding-top: 14px;"></div>
            <a-form-item>
                <a-button size="large" htmlType="submit" class="login-button" :loading="state.loginBtn" :disabled="state.loginBtn">登录
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
    import Vue from 'vue';
    import env from '@/config/env';
    // import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha';
    import { userLogin, loginCode } from '@/api/passport';
    import { GetMenuAuthority } from '@/api/api';
    import { ACCESS_TOKEN, USER_RULE } from '@/store/mutation-types';
    import { showErrors, showError, showSuccess } from '@/utils/showMsg';
    import { mapActions } from 'vuex';
    export default {
        components: {
            // TwoStepCaptcha,
        },
        data() {
            return {
                customActiveKey: 'tab1',
                loginBtn: false,
                isLoginError: false,
                form: this.$form.createForm(this),
                state: {
                    time: 60,
                    loginBtn: false,
                    smsSendBtn: false,
                },
                wrapperCol: { span: 24 },
                codeInfo:{}
            };
        },
        mounted(){
          const that = this;
        //   that.GetCode()
        },
        methods: {
            ...mapActions({
                storeLogin: 'user/Login',
                // InfoData: 'user/UserInfo',
            }),

            // 获取登录验证码
            async GetCode(){
              const that = this;
              let res = await loginCode();
              console.log(res);
              if(res.data.code == 200){
                let data = res.data.data;
                that.codeInfo = data
              }else{
                showError(res.data.msg)
              }
            },


            handleSubmit(e) {
                e.preventDefault();
                const {
                    form: { validateFields },
                    state,
                    customActiveKey,
                    Login,
                } = this;

                state.loginBtn = true;

                // const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha'];
                const validateFieldsKey = ['username', 'password', 'captcha']

                validateFields(validateFieldsKey, { force: true }, (err, values) => {
                    if (!err) {
                        const loginParams = {
                            username: values.username,
                            password: values.password,
                            // captcha: values.captcha,
                            // captchaId: this.codeInfo.captchaId
                        };
                        userLogin(loginParams).then((res) => {
                            // console.log(res);
                            if (res.data.code == 200) {
                                console.log(res);
                                this.isLoginError = false
                                let data = res.data.data
                                this.storeLogin({
                                    accessToken: data.AdminToken,
                                    UserData: {
                                        UserId: data.user_id, //主键id
                                        name: data.nickname, //用户昵称
                                        username:data.username, //用户登录名
                                        headimg: data.headerImg ? data.headerImg : require('../../assets/images/avatar.png'),
                                        // authorityId: data.authorityId, //用户角色id
                                        // baseColor: data.user.baseColor, //基础颜色
                                        // phone: data.phone, //用户手机号
                                        // email: data.email,
                                        // sideMode: data.user.sideMode, //用户侧边主体颜色
                                    },
                                });
                                // 获取角色menu
                                // GetMenuAuthority({authorityId:data.user.authorityId}).then(info=>{
                                //   if(info.data.code == 0){
                                    // let datas = info.data.data;
                                    // let RouterList =[]; //菜单列表
                                    // let RouteArr = []; //路由列表
                                    // datas.menus.forEach(item => {
                                    //   RouteArr.push(item.path)
                                    //   if(item.parentId == 0){
                                    //     item.children = []
                                    //     RouterList.push(item)
                                    //   }
                                    // });
                                    // RouterList.forEach(item => {
                                    //   datas.menus.forEach(items=>{
                                    //     if(item.ID == items.parentId){
                                    //       item.children.push(items)
                                    //     }
                                    //   })
                                    // })
                                    // let infodata = {
                                    //   RouterList,
                                    //   RouteArr
                                    // }
                                    // console.log(infodata);
                                    // Vue.ls.set(USER_RULE, infodata, env.tokenExpires);
                                    showSuccess(res.data.msg);
                                    this.$router.push({ path: '/' });
                                    // 延迟 1 秒显示欢迎信息
                                    setTimeout(() => {
                                        this.$notification.success({
                                            message: '欢迎',
                                            description: `${data.nickname}，欢迎回来`
                                        })
                                    }, 1000)
                                //   }else{
                                //     showError(info.data.msg)
                                //   }
                                // })
                            } else {
                                showError(res.data.msg);
                                this.isLoginError = true
                            }
                            state.loginBtn = false;
                        });
                    } else {
                        setTimeout(() => {
                            state.loginBtn = false;
                        }, 600);
                    }
                });
            },


        },
    };
</script>
<style lang="less">
    .desc{
      font-size: 22px;
      font-weight: bold;
      margin: 22px 0;
    }
    .user-layout-login {
        label {
            font-size: 14px;
        }
        .getCaptcha {
            display: block;
            width: 100%;
            height: 40px;
        }

        .forge-password {
            font-size: 14px;
        }

        button.login-button {
            padding: 0 15px;
            font-size: 16px;
            height: 40px;
            width: 100%;
        }

        .user-login-other {
            text-align: left;
            margin-top: 24px;
            line-height: 22px;

            .item-icon {
                font-size: 24px;
                color: rgba(0, 0, 0, 0.2);
                margin-left: 16px;
                vertical-align: middle;
                cursor: pointer;
                transition: color 0.3s;

                &:hover {
                    color: #1890ff;
                }
            }

            .register {
                float: right;
            }
        }

        // 验证码
        .codeBox{
          width: 46%;
          height: 40px;
          border-radius: 30px;
          background: #FFC3E5;
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          overflow: hidden;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }

        .ant-input,.ant-btn{
            border-radius: 30px;
        }
        .ant-btn{
          box-shadow: 0px 3px 6px rgba(125, 53, 184, 0.16);
          border: 0;
          color:#fff;
          background: rgba(245, 72, 236, 0.5);
        }
    }
</style>